<template>
  <v-card>
    <v-card-title>历史记录</v-card-title>
    <v-card-text>
      <v-row>
        <v-simple-table>
          <template v-slot:default>
            <thead>
              <tr>
                <th class="text-left">
                  编号
                </th>
                <th class="text-left">
                  开始时间
                </th>
                <th class="text-left">
                  结束时间
                </th>
                <th class="text-left">
                  类型
                </th>
                <th class="text-left">
                  结果
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="historyInfo in historyInfos" :key="historyInfo.ID">
                <td>{{ historyInfo.ID }}</td>
                <td>{{ historyInfo.CrateTime }}</td>
                <td>{{ historyInfo.SaveTime }}</td>
                <td>{{ historyInfo.Type.toString() }}</td>
                <td>TODO</td>
              </tr>
            </tbody>
          </template>
        </v-simple-table>
      </v-row>
    </v-card-text>
  </v-card>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Sync } from "vuex-pathify";
import { IHistoryInfo } from "@/model/HistoryInfo";

@Component({})
export default class GameHistory extends Vue {
  // region Prop
  // endregion
  // region Data
  // endregion
  // region computed
  @Sync("HistoryInfos") historyInfos!: IHistoryInfo[];
  // endregion
  // region watch
  // endregion
  // region method
  // endregion
  // region hook
  created() {
    this.$axios
      .get("api/HistoryInfos")
      .then(response => {
        this.historyInfos = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
  // endregion
}
</script>

<style lang="scss"></style>
